<template>
  <slot></slot>
</template>
<script lang="ts" setup>
import { computed, provide } from 'vue';
const emits = defineEmits(['update:value', 'change', 'click']);
const props = defineProps<{
  type: 'radio' | 'multiple';
  value?: string | number | (string | number)[] | undefined;
}>();

const groupModelValue = computed(() => props.value);

const updateRadioGroupModelValue = (e: any) => {
  if (props.type === 'radio') {
    emits('update:value', e);
    emits('change', e);
  } else {
    let selectValue: (string | number)[] | undefined =
      (props.value as (string | number)[]) ?? [];
    // selectValue = e ?? []

    const index = selectValue?.findIndex((item) => item === e);
    if (index > -1) {
      if (selectValue.length > 1) {
        selectValue.splice(index, 1);
      }
    } else if (!e) {
      selectValue = undefined;
    } else {
      selectValue.push(e);
    }
    emits('update:value', selectValue);
    emits('change', selectValue);
  }
  emits('click', e);
};
provide('radioGroupModelValue', {
  type: props.type,
  groupModelValue,
  updateRadioGroupModelValue,
});
</script>
<style lang="scss"></style>
